<template>
  <div id="main-block">
        <el-carousel :interval="2000" type="card" height="220px">
    <el-carousel-item v-for="item in blockimg" :key="item">
         <div class="imgae_div">
       <img :src="item.pic" alt="" id="imgg">
         </div>
    </el-carousel-item>
  </el-carousel>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'carmap',
     
 data(){
     return{
         blockimg:"",
     }
 },
 mounted:function(){
     this.imgload();
     
 },
 updata:function(){
document.getElementsById('el-icon-arrow-right').click();
 },
 methods:{
      imgload: function() {
                    let that = this;
                    axios.get("http://39.101.203.189:3000/homepage/block/page").then(function(response) {
                        // console.log(response.data.data.blocks[0].extInfo.banners[0].pic);
                         let res = response.data.data.blocks[0].extInfo.banners;
                        let arr = new Array(6);
                        for (let i = 0; i < 6; i++) {
                            arr[i] = res[i];
                        }
                        console.log(arr);
                        that.blockimg = arr;
                       
                    }, function(err) {})
                }
 }
}
</script>
 

<style>
.el-carousel {
    position: relative;
    top:0px;
    color: #475669;
    font-size: 14px;
    opacity: 0.85;
    line-height: 240px;
    margin: 0;
    
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
/*  */
#main-block{
    position: relative;
    top:30px;
    width: 1200px;
    height: 360px;
}
 /* .imgae_div {
     position: relative;
     width: 100px;
     height: 400px;
 } */
 .imgae_div img {
     width: 600px;
     height: 220px;
 }
 .el-carousel__button{
  position: relative;
  top:-80px;
 }
  

 
  
</style>